<template>
  <div class="wrapper">
    <div class="multi-check">
      <div class="question-name">
        <template v-if="seq"> {{ seq }}. </template>
        <span class="q-text"
          >{{ questionData.question }}
          <span class="q-text-score">（分值：{{ questionData.score }}分）</span>
        </span>
        <div class="img-wrap" v-if="questionData.question_file">
          <img :src="questionData.question_file" />
        </div>
      </div>
      <div class="question-content multi" v-if="questionData.options">
        <el-checkbox-group
          v-model="questionData.fill_content"
          @change="handleInput"
          :disabled="disable"
        >
          <el-checkbox
            v-for="(item, index) in questionData.options"
            :key="index"
            :label="item.option_id + ''"
          >
            <template v-if="item.option_file">
              {{ item.option_content }}
              <div class="img-wrap">
                <img :src="item.option_file" />
              </div>
            </template>
            <template v-else>
              {{ item.option_content }}
            </template>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "multiCheck",
  components: {},
  props: ["seq", "questionData", "mode"],
  computed: {
    disable() {
      return (
        this.mode === "detail" ||
        this.mode === "score" ||
        this.mode === "answer"
      );
    },
  },
  data() {
    return {
      checkList: [],
    };
  },
  mounted() {
    // console.log('mul', this.questionData);
    if (!this.questionData.fill_content) {
      this.questionData.fill_content = [];
    }
  },
  methods: {
    handleInput() {
      this.$emit("submitAnswer", {
        question_id: this.questionData.question_id, // 考题id
        fill_content: (this.questionData.fill_content || []).join(","), // 填写内容
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>